import React, { Component } from 'react';
import { Col, Row, Table, Button, Form, Input, Modal } from 'antd';
import { Link } from 'dva/router';
import { connect } from 'dva';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './${className}.less';

const FormItem = Form.Item;
@Form.create()
@connect(state => ({
  ${classname}: state.${classname},
}))
export default class ${className}Model extends Component {
  state = {
    current${className}: null,
  }
  componentDidMount() {
    const { dispatch } = this.props;
    const { page, pageSize, name } = this.props.${classname};
    dispatch({
      type: '${classname}/fetchList',
      payload: {
        page,
        pageSize,
        name,
      },
    });
  }

  filter= (e) => {
    e.preventDefault();
    const { dispatch } = this.props;
    const { page, pageSize } = this.props.${classname};
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const { name } = values;
        const payload = {
          name,
          page,
          pageSize,
        };
        dispatch({
          type: '${classname}/fetchList',
          payload:payload,
        });
      }
    });
  }

  delete${className} = (record) => {
    const { dispatch } = this.props;
    const { pageSize, page } = this.props.${classname};
    const { id,name } = record;
    Modal.confirm({
      title: '提示',
      content: <span>是否要删除 <span style={{ color: '#1890ff' }}>{name}</span> ?</span>,
      okType: 'danger',
      onOk: () => {
        dispatch({
          type: '${classname}/delete',
          payload: {
            pageSize,
            page,
            id,
            name,
          },
        });
      },
    });
  }

  render() {
    const { dispatch } = this.props;
    const { dataSource,
      page,
      pageSize,
      total,
      loading,
    } = this.props.${classname};
    const columns = [
        #foreach ($column in $columns)
          {
            title: '$column.comments',
                dataIndex: '$column.attrname',
              key: '$column.attrname',
          },
        #end
        {
        title: '操作',
        key: 'action',
        width: 360,
        render: (record) => {
          return (
            <span className={styles.actions}>
              <Link to={{
              pathname: '/home/${classname}/detail',
              search: `id=${record.id}`,
            }}
              >
                <Button type="primary" size="small" >查看</Button>
              </Link>
              <Link to={{
              pathname: '/home/${classname}/edit',
              search: `id=${record.id}`,
            }}
              >
                <Button type="primary" size="small" >编辑</Button>
              </Link>
              <Button type="danger" size="small" onClick={() => { this.delete${className}(record); }}>删除</Button>
            </span>
          );
        },
      }];
    const { getFieldDecorator } = this.props.form;
    const tableConfig = {
      columns,
      loading,
      dataSource,
      pagination: {
        defaultCurrent: page,
        defaultPageSize: pageSize,
        showSizeChanger: true,
        showQuickJumper: true,
        total,
        pageSize,
        current: page,
        onShowSizeChange: (currentPageSize, targetPageSize) => {
          dispatch({
            type: '${classname}/fetchList',
            payload: {
              page: currentPageSize,
              pageSize: targetPageSize,
              name,
            },
          });
        },
        onChange: (current, pagesize) => {
          dispatch({
            type: '${classname}/fetchList',
            payload: {
              page: current,
              pageSize: pagesize,
              name,
            },
          });
        },
      },
    };
    return (
      <PageHeaderLayout>
        <Row gutter={{ xs: 8, sm: 16, md: 24 }} className={styles.filterBar} >
          <Col span={12}>
            <Form layout="inline">
              <FormItem label="名称：">
                {getFieldDecorator('name', {
                  initialValue: this.props.${classname}.name,
                })(
                  <Input placeholder="请输入名称" style={{ width: '100%', maxWidth: '300px' }} />
                )}
              </FormItem>
              <FormItem>
                <Button type="primary" onClick={this.filter}>搜索</Button>
              </FormItem>
            </Form>
          </Col>
          <Col span={12} >1</Col>
          <Col span={24}>
            <Link to="/home/${classname}/add"><Button type="primary" >添加</Button></Link>
          </Col>
        </Row>
        <Table {...tableConfig} className={styles.tableContent} />

      </PageHeaderLayout>
    );
  }
}
